<template>
	<view class="wrap-top-header" :style="'padding-top: ' + navigationHeight + 'px;'">
		<image class="top-header-bg" mode="widthFix" :src="$staticImagePath('common/top_bg.png')" />

		<view class="wrap-navigation-bar">
			<view class="address-bg flex align-center" @click.stop="$jump.go('/pages/home/home/changeCity')">
				<view class="address f-34">
					{{ getLocationText() }}
				</view>

				<image class="arrow" :src="$staticImagePath('home/address_arrow.png')" />
			</view>

			<!-- <image class="logo" :src="$staticImagePath('common/logo.png')" /> -->
			<image class="logo" :src="$getImageURL(logo)" />
		</view>

		<view class="wrap-search-bar flex align-center">
			<view class="scan-bg flex align-center" v-if="isStore" @click.stop="onSK">
				<image class="img" :src="$staticImagePath('home/scan.png')" />
				<view class="title f-22">
					<view>收</view>
					<view>款</view>
				</view>
			</view>

			<view class="search-bg flex align-center" @click.stop="$jump.go(`/pages/page/search`)">
				<image class="img" :src="$staticImagePath('home/search.png')" />

				<input class="input f-28" disabled placeholder="搜索" placeholder-class="place" />
			</view>

			<view class="scan-bg flex align-center" @click.stop="onPay">
				<image class="img" :src="$staticImagePath('home/scan.png')" />
				<view class="title f-22">
					<view>付</view>
					<view>款</view>
				</view>
			</view>
		</view>

		<view class="wrap-weather-bg flex align-center" v-if="weatherInfo !== null">
			<image class="img" :src="$staticImagePath(`/weather/${weatherInfo.icon}.svg`)" />

			<view class="temp f-32">{{ locationInfo.city }} {{ weatherInfo.feelsLike }}/{{ weatherInfo.temp }}℃</view>

			<view class="weather f-30 limit-num-line">
				天气:{{ weatherInfo.text }},{{ weatherInfo.windDir }}{{ weatherInfo.windScale }}级
			</view>
			<!-- ,风速{{
					weatherInfo.windSpeed
				}}km/h -->
		</view>
	</view>
</template>

<script>
	import { weatherInfo } from "@/API/common.js";
	import { GetShopDetails } from "@/API/home.js";
	export default {
		name: "HomeNavigationBar",
		props: {
			/**
			 * 定位信息
			 */
			locationInfo: {
				type: Object,
				default: null,
			},
			/**
			 * 是否是商家
			 */
			isStore: {
				type: Boolean,
				default: false,
			},
			/**
			 * 店铺信息
			 */
			shopInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				navigationHeight: this.$navigationHeight - 45,
				weatherInfo: null,
				logo: "",
			};
		},
		watch: {
			locationInfo: {
				handler() {
					if (
						this.locationInfo.lat &&
						this.locationInfo.lng &&
						this.locationInfo.lat !== "" &&
						this.locationInfo.lng !== ""
					) {
						this.getWeatherInfo();
					}
				},
				immediate: true,
			},
		},
		mounted() {
			this.logo = this.$stoarge.getConfigData().logo;
		},
		methods: {
			/**
			 * 获取定位文字
			 */
			getLocationText() {
				let text = "定位中...";

				if (this.locationInfo) {
					if (this.locationInfo.status === "success") {
						text = this.locationInfo.district;
					} else if (this.locationInfo.status === "fail") {
						text = "定位失败";
					}
				}

				return text;
			},
			/**
			 * 收款
			 */
			onSK() {
				this.$jump.to(`/pages/mine/store/paymentCode?shopInfo=${JSON.stringify(this.shopInfo)}`);
			},
			/**
			 * 付款
			 */
			onPay() {
				if (!this.$filters.isLogin()) {
					return;
				}
				uni.scanCode({
					success: (scan) => {
						if (scan.errMsg === "scanCode:ok") {
							const path = scan.path;
							const pathArr = path.split("?");
							const scene = pathArr[1];
							const sceneArr = scene.split("=");
							const shop = decodeURIComponent(sceneArr[1]);
							const shopArr = shop.split(":");
							const shop_id = shopArr[1];
							
							if (this.shopInfo !== null && shop_id == this.shopInfo.id) {
								this.$st.show("不支持向自己付款");
								return;
							}
							
							this.$commonNetwork.onBindHigher(shop_id);
							
							GetShopDetails(sceneArr[1]).then((res) => {
								if (res.data === null) {
									this.$st.show("店铺不存在");
									return;
								}
								this.$jump.to(`/pages/home/home/payment?shopInfo=${JSON.stringify(res.data)}`);
							});
						}
					},
					fail: () => {
						this.$st.fail("扫码失败");
					},
				});
			},
			/**
			 * 获取天气信息
			 */
			getWeatherInfo() {
				weatherInfo(this.locationInfo.lat, this.locationInfo.lng).then((res) => {
					if (res.data.code == 200) {
						this.weatherInfo = res.data.now;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-top-header {
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 99;
		overflow: hidden;

		.top-header-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
		}

		.wrap-navigation-bar {
			width: 100%;
			height: 45px;
			overflow: hidden;
			position: relative;

			.address-bg {
				position: absolute;
				left: 30rpx;
				width: 200rpx;
				overflow: hidden;
				top: 50%;
				transform: translateY(-50%);
				gap: 10rpx;

				.address {
					max-width: 170rpx;
					overflow: hidden;
					--limit-num: 1;
					color: #121212;
					font-weight: 500;
				}

				.arrow {
					width: 20rpx;
					height: 20rpx;
				}
			}

			.logo {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 244rpx;
				height: 64rpx;
			}
		}

		.wrap-search-bar {
			width: 100%;
			overflow: hidden;
			padding: 10rpx 25rpx;
			box-sizing: border-box;
			gap: 15rpx;
			position: relative;

			.search-bg {
				flex: 1;
				overflow: hidden;
				height: 64rpx;
				border-radius: 32rpx;
				overflow: hidden;
				background-color: white;
				padding: 0 23rpx;
				gap: 18rpx;
				box-sizing: border-box;

				.img {
					width: 30rpx;
					height: 30rpx;
				}

				.input {
					flex: 1;
					color: #121212;
					font-weight: 400;
				}

				/deep/ .place {
					color: #888888;
				}
			}

			.scan-bg {
				gap: 10rpx;

				.img {
					width: 50rpx;
					height: 50rpx;
				}
				.title {
					color: #121212;
				}
			}
		}

		.wrap-weather-bg {
			width: 100%;
			overflow: hidden;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			position: relative;

			.img {
				width: 60rpx;
				height: 60rpx;
			}

			.temp {
				margin-left: 8rpx;
				color: #121212;
			}

			.weather {
				flex: 1;
				--limit-num: 1;
				margin-left: 24rpx;
				color: #888888;
			}
		}
	}
</style>
